<?php
/**
 * @Author: Ron Chen
 * @Date:   2017-03-25 00:33:50
 * @Last Modified by:   Ron Chen
 * @Last Modified time: 2018-04-23 23:25:07
 */
use Yii;
?>

<div class="container-fluid" style="padding: 0px;">
	<!-- 处理提示消息 -->
	<?php if(Yii::$app->session->hasFlash('success')): ?>
		<div class="alert alert-success" role="alert">
			<?php echo Yii::$app->session->getFlash('success');?>
		</div>
	<?php endif;?>

	<div class="panel panel-default">
		<div class="panel-heading">投保人信息</div>
		<div class="panel-body">
			<form id="userInfo" class="form-horizontal">
				<input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken() ?>">
				<input type="hidden" name="project_id" value="1">
				<input type="hidden" name="account_id" value="10002">
				
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">姓&nbsp;&nbsp;名：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">证件类型：</div>
					<div class="control-label col-xs-8">
						<select class="form-control" name="id_type" style="border:0px;border-bottom:#eee 1px solid;">
							<option value="1">身份证</option>
							<option value="2">出生证</option>
							<option value="3">护照</option>
							<option value="4">其他</option>
						</select>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">证件号：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="id_card">
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">出生日期：</div>
	                <div class="control-label col-xs-8">
	                	<input id="user_birthday" name="birthday" style="border:0px;border-bottom:#eee 1px solid;" placeholder="请选择出生日期"/>
	                </div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">性别：</div>
					<div class="control-label col-xs-8">
						<label class="radio-inline"><input type="radio" name="user-sex" value="1"> 男 </label>
						<label class="radio-inline"><input type="radio" name="user-sex" value="2 "> 女 </label>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">手机号码：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="userphone">
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">电子邮箱：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="useremail">
					</div>
				</div>
			</form>
		</div>
	</div>
	<!-- 被保险人资料 -->
	<div class="panel panel-default">
		<div class="panel-heading">
			被保险人资料(可填多人)
			<button id="btn-add-insure" type="button" class="btn btn-success btn-sm" data-toggle="modal" href="#insurer"><span class="glyphicon glyphicon-plus"></span>新增</button>
		</div> 
		<div class="panel-body">
			<form id="personInfo" class="form-horizontal">
				<input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken() ?>">
				<!-- 绑定项目编号 price_id -->
				<input type="hidden" name="project_id" value="1">
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-5" style="padding:5px 0px 0px 20px;">与投保人关系：</div>
					<div class="control-label col-xs-7">
						<select id="sel_insure_info" class="form-control" name="person_re_type" style="border:0px;border-bottom:#eee 1px solid;">
							<option value="1">本人</option>
							<option value="2">配偶</option>
							<option value="3">父母</option>
							<option value="4">子女</option>
							<option value="5">其他(已获被保险人许可)</option>
						</select>
					</div>
				</div>
	
				<div class="form-group person-info" style="margin-bottom:5px;display: none;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">姓&nbsp;&nbsp;名：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="person_name">
					</div>
				</div>
				<div class="form-group person-info" style="margin-bottom:5px;display: none;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">证件类型：</div>
					<div class="control-label col-xs-8">
						<select class="form-control" name="person_id_type" style="border:0px;border-bottom:#eee 1px solid;">
							<option value="1">身份证</option>
							<option value="2">出生证</option>
							<option value="3">护照</option>
							<option value="4">其他</option>
						</select>
					</div>
				</div>
				<div class="form-group person-info" style="margin-bottom:5px;display: none;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">证件号：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="person_card_no">
					</div>
				</div>
				<div class="form-group person-info" style="margin-bottom:5px;display: none;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">出生日期：</div>
					<div class="control-label col-xs-8">
	                	<input id="person_birthday" name="person_birthday" style="border:0px;border-bottom:#eee 1px solid;" placeholder="请选择出生日期" />
	                </div>
				</div>
				<div class="form-group person-info" style="margin-bottom:5px;display: none;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">手机号码：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="person_phone">
					</div>
				</div>
				<div class="form-group person-info" style="margin-bottom:5px;display: none;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">电子邮箱：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="person_email">
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="panel panel-default" style="margin-bottom: 20px;">
		<div class="panel-heading">
			出行信息(选填)
		</div>
		<div class="panel-body">
			<form id='other-info' class="form-horizontal">
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-5" style="padding:5px 0px 0px 20px;">旅行目的地：</div>
					<div class="control-label col-xs-7">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="destination">
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 新增保险人资料 -->
	<div id="insurer" class="fade" style="background-color:#fff;display:none;height:400px;width: 100%;position:fixed;z-index:1052;bottom:0;left:0;">
		<div class="modal-header">
			<button type="button" class="close" style="font-size: 30px;" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title">
				新增被保险人/修改资料(最多可填<span>9</span>人)	
			</h4>
		</div>
		<div class="modal-body">
			<form id='new-info' class="form-horizontal">
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-5" style="padding:5px 0px 0px 20px;">与投保人关系：</div>
					<div class="control-label col-xs-7">
						<select class="form-control" name="policy_type" style="border:0px;border-bottom:#eee 1px solid;">
							<option value="1">父母</option>
							<option value="2">子女</option>
							<option value="3">朋友</option>
							<option value="4">兄弟</option>
							<option value="5">姐妹</option>
							<option value="6">其他</option>
						</select>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">姓&nbsp;&nbsp;名：</div>
					<div class="control-label col-xs-9">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="policy_name">
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件类型：</div>
					<div class="control-label col-xs-9">
						<select class="form-control" name="id_type" style="border:0px;border-bottom:#eee 1px solid;">
							<option value="1">身份证</option>
							<option value="2">出生证</option>
							<option value="3">护照</option>
							<option value="4">其他</option>
						</select>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件号：</div>
					<div class="control-label col-xs-9">
						<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="id_number">
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">手机号码：</div>
					<div class="control-label col-xs-9">
						<input type="text" class="form-control" style="border:#eee 1px solid;" name="telephone">
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">电子邮箱：</div>
					<div class="control-label col-xs-9">
						<input type="text" class="form-control" style="border:#eee 1px solid;" name="email">
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default close-modal">返回</button>
			<!-- 跳转到订单详情页 -->
			<button id="add-insurance-policy" type="button" class="btn btn-info">确认</button>
			<!-- 清空表单,继续填写 -->
			<button id='add-continue-policy' type="button" class="btn btn-success">继续添加</button>
		</div>
	</div>
</div>

<div id="tooltip_msg" class="tooltip" style="position:fixed;bottom: 60px;left: 38%;line-height: 30px;">
    <div class="tooltip-inner" id="tip_message">
        错误消息提示
    </div>
</div>

<nav class="navbar navbar-default navbar-fixed-bottom" style="padding: 10px 0px;">
    <div class="navbar-inner navbar-content-center">
        <a id="btn_buy" class="btn btn-block btn-success" href="javascript:void(0);">立即购买</a>
    </div>
</nav>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/mobiscroll.custom.min.js"></script>

<script>
	$(function (){
		$('body').height($('body')[0].clientHeight);

	    $(".close-modal").on('click',function(){
	    	$("#insurer").modal('hide');
	    });

	    // 选择本人之后显示更多信息
	    $("#sel_insure_info").change(function(){
	    	var _self = $(this);
	    	if (_self.val() != 1) {
	    		$(".person-info").show('slow');
	    	}else{
	    		$(".person-info").hide('slow');
	    	}
	    });

		var now = new Date(),
	    minDate = new Date(now.getFullYear() - 100 , now.getMonth(), now.getDate()),
	    maxDate = new Date(now.getFullYear() , now.getMonth(), now.getDate());
    	var instance = mobiscroll.date('#user_birthday', {
		    theme: 'ios',
		    lang: 'zh',
		    display: 'bottom',
		    dateWheels: 'yy MM dd',
    		dateFormat: 'yy-mm-dd',
		    min: minDate,
		    max: maxDate
		});

    	// 更新文件
		var instance_day = mobiscroll.date('#person_birthday', {
		    theme: 'ios',
		    lang: 'zh',
		    display: 'bottom',
		    dateWheels: 'yy MM dd',
    		dateFormat: 'yy-mm-dd',
		    min: minDate,
		    max: maxDate
		});
		
		
	    /**
	     * 处理接受参数
	     */
	    $("#btn_buy").on('click',function(){
	    	var param  = $("#userInfo").serialize();
	    		param += "&" + $("#personInfo").serialize();
	    		param += "&" + $("#other-info").serialize();
	    	var post_url = "/buy/post-data?id=<?=$price_id;?>&source=<?=$source;?>";
	    	
	    	$.post(post_url,param,function(result){
	    		if (result.code == "0") {
	    			window.location.href = result.data;	
	    		}else{
	    			$("#tip_message").html(result.msg);
       				$("#tooltip_msg").css("opacity","0.6");
       				start_show(0,30);
	    		}
			});
	    });
	    var show_timer = null;
	    function start_show(iTarget,alpha){
	    	clearInterval(show_timer);
	    	show_timer = setInterval(function(){
	    		var speed = 0;
	    		if (alpha < iTarget) {
	    			speed = 5;
	    		}else{
	    			speed = -5;
	    		}
	    		if(alpha == iTarget){
			        clearInterval(show_timer);
			    }else{
			        alpha += speed; //透明度值增加效果
			        $("#tooltip_msg").css({"filter":"alpha(opacity:"+alpha+")","opacity":alpha/100});
			    }
	    	},500);
	    }
	    
	    // 添加完成之后继续操作
	    $("#add-insurance-policy").on('click',function(){
	    	// 跳转到订单详情页
	    	var param  = $("#new-info").serialize();
	    	var post_url = "/buy/add-insurance?id=<?=$price_id;?>";
	    	$.post(post_url,param,function(result){
				if (result.code == 0) {
					window.location.href = "/buy/confirm?id=" + result.data;
				}else{
					window.location.reload();
				}

			});
	    });
	    
	    // 继续填写
	    $("#add-continue-policy").on('click',function(){
	    	var param  = $("#new-info").serialize();
	    	var post_url = "/buy/add-insurance?id=<?=$price_id;?>";
	    	$.post(post_url,param,function(result){
			    $(':input','#new-info')
	    		.not(':button, :submit, :reset, :hidden')
	    		.val('')
	    		.removeAttr('checked');   
			});
	    })
	});
</script>